<template>
  <div class="user-home">
    <Cell title="个人信息" center :border="false" is-link to="/user/profile">
      <template class="extra">
        <span class="avatar" :style="{backgroundImage:`url(${avatar})`}"></span>
      </template>
    </Cell>
    <Cell title="我的尺码" :border="false" is-link to="/user/size"/>
    <Cell title="兴趣分类" :border="false" is-link to="/user/interest"/>
    <Cell title="地址管理" :border="false" is-link to="/user/address"/>
    <Cell title="会员中心" :border="false" is-link />
    <Cell title="账户安全" :border="false" is-link to="/user/account"/>
  </div>
</template>

<script>
import { Cell } from 'vant'
import { mapState } from 'vuex'
// import emitter from '@/hybrid/emitter'
import http from '@/api/http'
import avatar from '@/assets/images/user_default.jpg'
export default {
  name: 'UserHome',
  components: { Cell },
  computed: {
    ...mapState(['token'])
  },
  methods: {
    // ...mapMutations(['setAvatar'])
  },
  data () {
    return {
      avatar
    }
  },
  watch: {
    token () {
      http.get('/member/profile').then(res => {
        this.avatar = res.data.result.avatar
      })
    }
  },
  created () {
    // emitter.on('fullter_preview_avatar', ({ avatar, save }) => {
    //   // this.profile.avatar = avatar
    //   if (save) this.setAvatar(avatar)
    // })
    http.get('/member/profile').then(res => {
      this.avatar = res.data.result.avatar
    })
  }
}
</script>

<style scoped lang='less'>
.van-cell {
  margin-bottom: 10px;
  border-radius: 4px;
}
.avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  background: url(../../../assets/images/user_default.jpg) no-repeat center / cover;
  display: inline-block;
  vertical-align: middle;
}
</style>
